<template>
<div class="fullscreen">
  <div style="height:329px"> <Topblank/> </div>
  <!-- flex布局范围 -->
  <div class="mainContainer">
    <div class="runninglist"> <ShadowPicture/> </div>
    <div class="maintextbox"> <TextReadingBox/> </div>
  <!-- flex布局范围 -->
  </div>
  <div class="footbox"><br/>--The End--</div>
</div>
</template>

<script>
import ShadowPicture from './components/ShadowPicture.vue'
import Topblank from './components/Topblank.vue'
import TextReadingBox from './components/TextReadingBox.vue'

export default {
  name: 'App',
  components: {
    ShadowPicture,
    Topblank,
    TextReadingBox,
  }
}
</script>

<style>
.fullscreen{
  width: 100%;
  height: 100%;
  background-color: rgb(236, 191, 148);
}
div.runninglist{
  margin:10px;
  width: 20%;
}
div.maintextbox{
  width: 77%;
  height: 1500px;
}
div.mainContainer{
  display: flex;
  justify-content: center;
}
div.footbox{
  width:100%;
  height:50px;
  background-color:rgb(80, 59, 13);
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
</style>
